<template>
  <div id="app">
    <!-- 设置顶部导航栏 -->
    <mt-header title="智 能 导 诊">
      <mt-button icon="back" @click="goBack" slot="left">返回</mt-button>
      <mt-button slot="right" @click="goBack">
        <img
          src="../../assets/images/home.png"
          height="20"
          width="20"
          slot="icon"
          style="margin-top: 5px"
        />
      </mt-button>
    </mt-header>

    <!-- 内容区域 -->
    <div class="main">
      <!-- 左侧导航区域 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="item in partList"
          :key="item.id"
          :title="item.name"
        />
      </van-sidebar>

      <!-- 左侧细分导航区域 -->
      <div id="all">
        <div class="box_1" v-if="activeKey == 0" @click="yiClick">
          <van-sidebar v-model="partIndex0" @change="Bishow">
            <van-sidebar-item
              v-for="item in biList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 1" @click="erClick">
          <van-sidebar v-model="partIndex1" @change="Bishow">
            <van-sidebar-item
              v-for="item in yanList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 2" @click="sanClick">
          <van-sidebar v-model="partIndex2">
            <van-sidebar-item
              v-for="item in mianList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 3" @click="siClick">
          <van-sidebar v-model="partIndex3">
            <van-sidebar-item
              v-for="item in kouqiangList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 4" @click="wuClick">
          <van-sidebar v-model="partIndex4">
            <van-sidebar-item
              v-for="item in jingList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 5" @click="liuClick">
          <van-sidebar v-model="partIndex5">
            <van-sidebar-item
              v-for="item in xiongList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 6" @click="qiClick">
          <van-sidebar v-model="partIndex6">
            <van-sidebar-item
              v-for="item in fuList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 7" @click="baClick">
          <van-sidebar v-model="partIndex7">
            <van-sidebar-item
              v-for="item in yaoList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
        <div class="box_1" v-else-if="activeKey == 8" @click="jiuClick">
          <van-sidebar v-model="partIndex8">
            <van-sidebar-item
              v-for="item in shouList"
              :key="item.id"
              :title="item.name"
            />
          </van-sidebar>
        </div>
      </div>

      <!-- 右侧详细内容区域 -->
      <div id="detail">
        <!-- 鼻 -->
        <div class="rightInner" v-if="rightIndex == 0">
          <p>建议：</p>
          <p>耳鼻咽喉科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 眼 -->
        <div class="rightInner" v-if="rightIndex == 1">
          <p>建议：</p>
          <p>眼科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 面 -->
        <div class="rightInner" v-if="rightIndex == 2">
          <p>建议：</p>
          <p>皮肤科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 口腔 -->
        <div class="rightInner" v-if="rightIndex == 3">
          <p>建议：</p>
          <p>口腔科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 颈部 -->
        <div class="rightInner" v-if="rightIndex == 4">
          <p>建议：</p>
          <p>骨科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 胸部 -->
        <div class="rightInner" v-if="rightIndex == 5">
          <p>建议：</p>
          <p>心血管内科科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 腹部 -->
        <div class="rightInner" v-if="rightIndex == 6">
          <p>建议：</p>
          <p>普通外科科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 腰部 -->
        <div class="rightInner" v-if="rightIndex == 7">
          <p>建议：</p>
          <p>疼痛科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
        <!-- 手 -->
        <div class="rightInner" v-if="rightIndex == 8">
          <p>建议：</p>
          <p>神经内科科门诊</p>
          <p>温馨提示：</p>
          <p>此处推荐科室仅供参考</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { Notify } from "vant";
export default {
  name: "Navigation",
  data() {
    return {
      activeKey: null, //左侧总导航栏选中的索引
      partIndex0: 0, //细分导航中的索引
      partIndex1: 0, //细分导航中的索引
      partIndex2: 0, //细分导航中的索引
      partIndex3: 0, //细分导航中的索引
      partIndex4: 0, //细分导航中的索引
      partIndex5: 0, //细分导航中的索引
      partIndex6: 0, //细分导航中的索引
      partIndex7: 0, //细分导航中的索引
      partIndex8: 0, //细分导航中的索引
      rightIndex: null, //当前渲染右侧哪个内容的编号
      //左侧总览导航数据
      partList: [
        { id: 1, name: "鼻" },
        { id: 2, name: "眼" },
        { id: 3, name: "面部" },
        { id: 4, name: "口腔" },
        { id: 5, name: "颈部" },
        { id: 6, name: "胸部" },
        { id: 7, name: "腹部" },
        { id: 8, name: "腰部" },
        { id: 9, name: "手" },
      ],
      //左侧细分分列表
      biList: [
        { id: 1, name: "鼻部溃疡" },
        { id: 2, name: "鼻腔异物" },
        { id: 3, name: "鼻内干痒" },
        { id: 4, name: "刺激性打喷嚏" },
        { id: 5, name: "嗅觉障碍" },
        { id: 6, name: "反复性流鼻血" },
      ],
      yanList: [
        { id: 1, name: "视力下降" },
        { id: 2, name: "红膜发炎" },
        { id: 3, name: "眼部感染" },
        { id: 4, name: "眼疲劳" },
        { id: 5, name: "眼部突出" },
        { id: 6, name: "眼前发黑" },
      ],
      mianList: [
        { id: 1, name: "面部红肿" },
        { id: 2, name: "蝶形红斑" },
        { id: 3, name: "黑头粉刺" },
        { id: 4, name: "雀斑" },
        { id: 5, name: "面部感染" },
      ],
      kouqiangList: [
        { id: 1, name: "嘴角皲裂" },
        { id: 2, name: "泛酸" },
        { id: 3, name: "呕吐" },
        { id: 4, name: "牙齿痛" },
        { id: 5, name: "舌苔厚腻" },
      ],
      jingList: [
        { id: 1, name: "颈椎增生" },
        { id: 2, name: "颈部酸痛" },
        { id: 3, name: "颈椎痛" },
      ],
      xiongList: [
        { id: 1, name: "心绞痛" },
        { id: 2, name: "心窝隐痛" },
        { id: 3, name: "心脏疼痛" },
        { id: 4, name: "心电图异常" },
      ],
      fuList: [
        { id: 1, name: "阑尾炎" },
        { id: 2, name: "腹部肿块" },
        { id: 3, name: "腹部胀气" },
        { id: 4, name: "腹痛" },
        { id: 5, name: "胆囊炎" },
      ],
      yaoList: [
        { id: 1, name: "腰腿痛" },
        { id: 2, name: "慢性腰痛" },
        { id: 3, name: "急性腰痛" },
        { id: 4, name: "坐骨神经痛" },
        { id: 5, name: "腰椎间盘突出" },
      ],
      shouList: [
        { id: 1, name: "手指麻痛" },
        { id: 2, name: "手抖" },
        { id: 3, name: "抽筋" },
        { id: 4, name: "握力不足" },
      ],
    };
  },

  mounted() {},

  methods: {
    //左侧总导航栏切换事件
    onChange() {
      this.rightIndex = null;
    },
    //细分导航栏切换事件
    Bishow(e) {
      console.log(e);
    },
    goBack() {
      this.$router.push({
        path: "./index",
      });
    },
    yiClick() {
      this.rightIndex = 0;
    },
    erClick() {
      this.rightIndex = 1;
    },
    sanClick() {
      this.rightIndex = 2;
    },
    siClick() {
      this.rightIndex = 3;
    },
    wuClick() {
      this.rightIndex = 4;
    },
    liuClick() {
      this.rightIndex = 5;
    },
    qiClick() {
      this.rightIndex = 6;
    },
    baClick() {
      this.rightIndex = 7;
    },
    jiuClick() {
      this.rightIndex = 8;
    },
  },
};
</script>

<style lang="less" scoped>
#app /deep/ .mint-header-title {
  overflow: initial;
}
.main {
  display: flex;
}
.box_1 {
  .van-sidebar-item {
    background-color: #f1f2f6;
  }
}
.rightInner {
  p {
    font-weight: 700;
  }
  p:nth-child(1) {
    font-size: 18px;
    padding: 10px 0;
  }
  p:nth-child(2) {
    font-size: 19px;
    text-indent: 2em;
    padding-bottom: 10px;
  }
  p:nth-child(3),
  p:nth-child(4) {
    font-size: 14px;
    color: #ff7f50;
  }
  p:nth-child(4) {
    text-indent: 2em;
  }
}
.van-sidebar{
  width: 80px;
}
</style>